<template>
  <div class="login">
    <div class="login-box">
      <h1>在线教育管理系统</h1>
      <el-card style="width: 500px">
        <template #header>
          <span class="card-header"> 登录系统 </span>
        </template>

        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-width="auto"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  suffix-icon="User"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                  suffix-icon="Lock"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
// 组件命名
defineOptions({ name: "Login" });
import { reactive, useTemplateRef } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { handleLogin as getData } from "@/api/index.js";

//路由实例
const $router = useRouter();
//form表单
const ruleFormRef = useTemplateRef("ruleFormRef");

const loginForm = reactive({
  username: "",
  password: "",
});
const loginRules = {
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: ["change", "blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: ["change", "blur"],
    },
  ],
};

//登录
const handleLogin = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (!valid) return ElMessage.error("校验失败！");
    $router.replace("/layout");
    // getData(loginForm.username, loginForm.password)
    //   .then((res) => {
    //     if (res.code == "20000") {
    //       ElMessage.success("登录成功！");
    //       $router.replace("/layout");
    //     }
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   });
  });
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: relative;

  .login-box {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);

    h1 {
      margin-bottom: 20px;
      text-align: center;
    }

    :deep(.el-card__header) {
      text-align: center;
    }
  }
}
</style>
